<!--
 * @Date: 2022-03-29 19:07:44
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-29 19:59:38
 * @FilePath: \vue3Components\src\views\calendartest.vue
 * @Description: something  
--> 
<template>
  <my-Calendar :events="events" @date-click="dateClick" :eventContent="eventContent"></my-Calendar>
</template>
 <script lang='ts' setup>
import MyCalendar from '../components/calendar/Calendar.vue';
import { EventItem } from '../components/calendar/types'
import { ref } from 'vue';
import { EventContentArg } from '@fullcalendar/core';
import { DateClickArg } from '@fullcalendar/interaction';

let events = ref<EventItem[]>([
  {
    title: '购物',
    start: '2022-03-25 10:00:00',
    end: '2022-03-25 12:00:00',
    editable: true
  },
  {
    title: '学习',
    start: '2022-03-25 08:00:00',
    end: '2022-03-25 16:00:00',
    editable: true
  }
])
let dateClick = (info: DateClickArg) => {
  let event = {
    start: `${info.dateStr} 12:00:00`,
    end: `${info.dateStr} 13:00:00`,
    title: '吃饭',
    editable: true
  }
  events.value.push(event)
}

let eventContent = (arg: EventContentArg) => {
  let el = document.createElement('div')
  let timeTextArr = arg.timeText.split(' - ')
  let start = timeTextArr[0].replace('上午', '').replace('下午', '').replace('时', '')
  let end = timeTextArr[1].replace('上午', '').replace('下午', '').replace('时', '')
  console.log(start, timeTextArr);
  // 
  el.innerHTML = `
  <img src="src/assets/logo.png" style="width:20px;height:20px;">
         <div>开始时间: ${start}</div>
         <div>结束时间: ${end}</div>
         <div>标题: ${arg.event._def.title}</div>
        `
  return {
    domNodes: [el]
  }
}
</script>
<style lang='less' scoped>
.fc-daygrid-event {
  .Showbox {
    display: flex;
    align-items: center;
    color: red;
  }
}
</style>